<template>
    <div class="show-message-container" :class="{
        'message-success': props.type === 'success',
        'message-error': props.type === 'error',
        'message-warning': props.type === 'warn'
    }" ref="showMessageContainer">
        <div class="icon">
            <IconFon :icon="props.type" />
        </div>
        <div class="content">
            {{ props.content }}
            {{ props.isShow }}
        </div>
    </div>
</template>

<script setup>
import IconFon from "@/components/IconFon/index.vue";
import { defineProps, watch, ref } from "vue";
const showMessageContainer = ref(null);

const props = defineProps({
    duration: {
        type: Number,
        default: 1000
    },
    content: {
        type: String,
        default: ""
    },
    type: {
        type: String,
        default: "success"
    },
    isShow: {
        type: Boolean,
    },
});

//若需要数据监听就不能够进行，props解构否则无法进行监听到其内容
watch(() => props.isShow, () => {
    console.log("监听了")
    console.log(props.isShow)
    if (props.isShow) {
        showMessageContainer.value.style.opacity = 1;
        showMessageContainer.value.style.transform = `translate(-50%, 0)`;
    } else {
        showMessageContainer.value.style.opacity = 0;
        showMessageContainer.value.style.transform = `translate(-50%, 100%)`;
    }

})


</script>

<style lang="less" scoped>
.show-message-container {
    transition: 1s;
    opacity: 0;
    position: fixed;
    top: 15%;
    left: 50%;
    z-index: 999;
    transform: translate(-50%, 100%);
    min-width: 200px;
    max-width: 80%;
    padding: 12px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    display: flex;
    transition: 1s;
    z-index: 9999;
}

/* 成功提示样式 */
.message-success {
    background-color: #52c41a;
}

/* 失败提示样式 */
.message-error {
    background-color: #f5222d;
}

/* 警告提示样式 */
.message-warning {
    background-color: #faad14;
}
</style>